<template>
	<view>
		<view class="top-group">
			<view class="custom-audio">
				<view class="pic-text-group">
					<view class = "text-group">
						<view class = "text-oneLine" style="font-size: 25rpx;">
							点击播放
						</view>
					</view>
				</view>
				<view class = "btn-group">
					<image class = "image-btn" :src="player" @click="play"> </image>
				</view>
			</view>
			
		</view>
	</view>
</template>
 
<script>
	var player = '../../static/image/stop.png';
	var stop = '../../static/image/stop.png';
	var start = '../../static/image/start.png';
	
	var innerAudioContext = uni.createInnerAudioContext();
	
	export default {
		data() {
		  return {
		    audioCtx: null, // 音频上下文
		    duration: 0, // 音频总时长
		    currentTime: 0, // 音频当前播放的时长
			player : start,
		  }
		},
		props:{
			current :{
				type: [Object],
				default: ''
			}
		},
		methods: {
			play(e){
				
				if(innerAudioContext.paused){
					innerAudioContext.autoplay = true;
					innerAudioContext.src = this.current.work;
					innerAudioContext.onPlay(() => {
					  this.player = stop;
					})
				}else{
					this.player = start;
					innerAudioContext.destroy();
				}
			},
		}
	};
	
</script>
 
<style>
 .custom-audio {
   border: #CCC 1px solid;
   background: #F3F6FC;
   color: #333;
   justify-content: space-between; 
 }
 .pic-text-group{
	 display: block;
	 text-align: center;
	 margin-left:1rpx;
	 justify-content: space-between;
 }
 .image-btn{
	width: 90rpx; 
	height: 90rpx; 
	margin-left:1rpx;
	margin-right:10rpx;
	padding: 2vw;

 } 
 .btn-group{
	 text-align: center;
 }
 
 .image-music{
	width: 70rpx; 
	height: 70rpx; 
	margin-left:0rpx;
 }
 .text-group{
	display:block;            /*内联对象需加*/
	word-break:keep-all;      /* 不换行 */
	white-space:nowrap;       /* 不换行 */
	overflow:hidden;          /* 内容超出宽度时隐藏超出部分的内容 */
	text-overflow:ellipsis;  
 }
 .text-oneLine{
     overflow:hidden;          /* 内容超出宽度时隐藏超出部分的内容 */
     text-overflow:ellipsis;   /* 当对象内文本溢出时显示省略标记(...) ；需与overflow:hidden;一起使用。*/
 }
</style>